<template>
	<header class="header">
		<div class="brand">
			<div class="logo" aria-label="Logo"></div>
			<div class="titles">
				<h1 class="title">Espresso World Map</h1>
				<div class="subtitle">Past & upcoming Espresso events</div>
			</div>
		</div>
	</header>
</template>

<script>
export default { name: 'AppHeader' }
</script>

<style scoped>
.header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #fff; }
.brand { display: flex; align-items: center; gap: 10px; }
.logo { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffd27a, #f4a940); border: 1px solid #f1c27a; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6); }
.titles { display: flex; flex-direction: column; line-height: 1.15; }
.title { font-size: 18px; font-weight: 600; margin: 0; }
.subtitle { font-size: 12px; color: #8c8c8c; }
.actions { display: flex; gap: 8px; }
.btn { padding: 6px 10px; border: 1px solid #ddd; background: #fafafa; border-radius: 6px; cursor: pointer; }
</style> 